<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-28 19:21:30
 * @LastEditors: 47
 * @LastEditTime: 2023-01-05 21:57:13
-->
<template>
  <div class="exam-success">

    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">

      <template #title>

        <div class="title">
          {{testDetailObj.test_title}}
          <!-- 山西农业大学软件学院期末考试 -->
        </div>

      </template>

    </van-nav-bar>

    <!-- 签到成功 -->
    <div class="paper-succeed">
      <span class="succeed">交 卷 成 功</span>
      <span class="content">
        <span class="name">姓名：柴新宇</span>
        <span class="name">学号：20191611442</span>
        <span class="name">领取时间：{{testDetailObj.test_start_time}}</span>
        <span class="name">考试用时：120分钟</span>
        <span class="name">发放时间：{{testDetailObj.test_start_time}}</span>
        <span class="name" style="margin-bottom: 0px;">截止时间：{{testDetailObj.test_end_time}}</span>
      </span>
    </div>
    
  </div>
</template>

<script setup>
import { NavBar } from 'vant';
// 引入路由
import {useRouter,useRoute} from 'vue-router'
// 引入仓库
import { useCourseStore } from '@/stores/course'
import { onMounted } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'
//实例化仓库对象
const course = useCourseStore()
//解构方法
const { getCourseTestDetail } = course
//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { testDetailObj } = storeToRefs(course)

// 创建路由对象
const router = useRouter()
const route = useRoute()


const testId =  route.params.testId

onMounted(() => {
  getCourseTestDetail(testId)
})


// 点击左侧箭头返回上一页
const onClickLeft = () => history.back();
</script>

<style lang="less" scoped>
.exam-success{
  :deep(.van-icon) {
    color: black;
  }

  .paper-succeed{
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    height: 620px;

    .succeed{
      margin: 100px 0 25px;
      text-align: center;
      font-size: 25px;
      color: #33a0cf;
    }

    .content{
      display: flex;
      flex-flow: column;
      width: 70%;
      padding: 15px;
      background-color: #f5f9fa;

      .name{
        margin-bottom: 10px;
        color: #bdc1c2;
      }
    }
  }
}

</style>

